<!-- Author:Rain -->
<template>
    <!-- Geek头部导航栏 -->
    <Header sign-type="geek"></Header>
    <!-- GEEK主要内容区 -->
    <router-view v-slot="{ Component }">
        <transition name="fade">
            <component :is="Component" class="main" />
        </transition>
    </router-view>
</template>

<script setup lang="ts">
import Header from "@/components/header/index.vue"
import {onBeforeRouteUpdate } from "vue-router"
let transitionName=ref('')

/* 这个路由守卫来监视路由的变化 */
/* 这里其实我是想实现两边滑动转化路由界面的 */
onBeforeRouteUpdate((to:any,from:any)=>{
    let toPage=to.meta.page
    let fromPage=from.meta.page
    transitionName.value=toPage-fromPage>0?'slide-right':'slide-left'
})


</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}



</style>